<template>
  <div class="container">
    <div class="header">
      <div class="left">
        <div class="line"></div>
        <h2>考勤记录</h2>
        <el-input v-model="classSearchInput" placeholder="请输入姓名" style="width: 150px" class="className"
          v-if="roleId != '3' && roleId != '5'"></el-input>
        <el-date-picker v-model="currentYearMonth" type="month" placeholder="选择查询时间" style="width: 150px"
          value-format="YYYY-MM" class="className"></el-date-picker>
        <div style="position: relative">
          <el-button @click="handleSearch" class="search">搜索</el-button>
          <img src="../../assets/images/搜索.png" class="searchImg" alt="" />
        </div>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData"  style="width: 90% ;border-radius: 20px;margin: 0 auto;">
        <el-table-column prop="userName" label="姓名" align="center" />
        <el-table-column prop="recordMonth" label="月份" align="center" />
        <el-table-column prop="leaveDays" label="请假(天)" align="center" />
        <el-table-column prop="roleName" label="职能" align="center" />
        <el-table-column prop="outDays" label="出差(天)" align="center" />
        <el-table-column prop="presenceDays" label="应出勤(天)" align="center" />
       <el-table-column prop="realPresenceDays" label="实际出勤(天)" align="center" />
      </el-table>
      <div class="page">
        <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentPage"
          :page-size="pageSize" @current-change="handleCurrentPageChange" />
        <div>
          每页
          <el-input-number v-model="pageSize" :min="1" :max="30" controls-position="right" @change="handleChange" />条
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import '@/assets/css/businesstripdiary.css'
import { reactive, ref } from 'vue'
import { ElButton } from 'element-plus';
import { getWork,getWorkList ,addWork,getWorkMenu} from '@/components/api/Work'
// 定义当前年月
const currentYearMonth = ref('')
// 定义日期选择器的引用
const datePickerRef = ref(null)
//搜搜
const classSearchInput = ref('')
// 处理搜索
const handleSearch = () => {
  currentPage.value = 1 // 切换年月时重置当前页码
  if (roleId == 3 || roleId == 5) {
    fetchData2()
  } else {
    fetchData()
  }
}
//撤销
let del = (v) => {
  const data = {
    leaveId: v.leaveId, // 请假ID
  }
  revokeLeave('deleteLeave', data).then((res) => {
    if (res.code == 200) {
      ElMessage.success('撤销成功')
      if (role == '1' || role == '2') {
        fetchData()
      } else {
        getLeaveInfo1()
      }
    }
  })
}
// 处理页码变化
const handleCurrentPageChange = (page) => {
  currentPage.value = page // 更新当前页码
  console.log(currentPage.value);

  if (roleId == 3 || roleId == 5) {
    fetchData2()
  } else {
    fetchData()
  }
}
function handleChange() {
  currentPage.value = 1; // 切换每页显示的数量时重置当前页码
  if (roleId == 3 || roleId == 5) {
    fetchData2()
  } else {
    fetchData()
  }
}
let dialogVisible = ref(false)
//获取身份
let roleId = sessionStorage.getItem('roleId')
//当前页
let currentPage = ref(1)
//每个个数
let pageSize = ref(4)
//个数
let total = ref(1)
//数据
let tableData = ref([
  {
    roleName: '',
    recordMonth:'',
    outDays:'',
    presenceDays:'',
    username:'',
    realPresenceDays:''
  }
])
//申请数据
let formData = reactive([
  {
     roleName: '',
    recordMonth:'',
    outDays:'',
    presenceDays:'',
    username:'',
    realPresenceDays:''
  }
])
//管理员查看出差
async function fetchData() {
  let data = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
  }
  if (classSearchInput.value) {
    data.search = classSearchInput.value
  }
  if (currentYearMonth.value) {
    data.thisMonth = currentYearMonth.value
  }
  await  getWork("attendancesList",data).then((res) => {
      tableData.value = res.dataset.attendanceList
      total.value = res.dataset.pageCount*pageSize.value
    })
}
// function fetchData3() {
//   let data = {}
//   getWorkMenu('roleList', data).then((res) => {
//     if (res.code === 200) {
//       identityList.value = res.dataset
//     }
//   })
// }

let userId = sessionStorage.getItem('userId')
//老师查看个人出差
function fetchData2() {
  let data = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    userId: Number(userId),
    roleId: Number(roleId)
  }
  if (currentYearMonth.value) {
    data.thisMonth = currentYearMonth.value
  }
   getWorkList("attendancesListPersonal",data).then((res) => {
    tableData.value = res.dataset.attendanceList
    total.value = res.dataset.pageCount* pageSize.value
  })
}
onMounted(() => {
  formData.userName = sessionStorage.getItem('role');
  if (roleId == 3 || roleId == 5||roleId==4) {
    fetchData2()
  } else {
    fetchData()
  }
  
})
</script>

<style lang="less" scoped>
.reviewing {
  color: #007bff;
}

.reviewing2 {
  color: red;
}

.reviewing3 {
  color: green;
}
</style>